<template>
	<div class="wrap">
		<div class="loginBtn" :class="[headerScroll]" ref='guess'>
			 <ul>
				 <li v-for="(item,index) of Lists" :key="index">
					 <span class="line" @click='ShowClass(index)' :class="[Num == index?'active':'']">{{item.tabs}}</span>
				 </li>
			 </ul>
		</div>
		<div class="loginContent" >
			<div class="phone-login" v-show='isShow1'>
				<form action="">
					<ul>
						<li>
							<span class="inputSpan">+86</span>
							<input type="tel" maxlength="11" placeholder="请输入手机号码" v-model="phoneNum">
						</li>
						<li>
							<span class="inputSpan">验证码</span>
							<input type="text" maxlength="6" placeholder="请输入手机验证码">
							<button class="phone_yanzhengma" ref="phone_yanzhengma" 
								:class="{right_phone:rightPhone}" @click="getCode" :disabled="!rightPhone">
								{{timeSecond>0?'已发送':'获取验证码'}}
								<span class="time_over" v-if="timeSecond">({{timeSecond}}s)</span>
							</button>
						</li>
						<li>
							<input type="button" value="登录">
						</li>
					</ul>
				</form>
				<div class="regBtn"><span @click='registerBtn'>注册</span></div>
			</div>
			<div class="normal-login" v-show='isShow2'>
				<form action="">
					<ul>
						<li>
							<span class="inputSpan">+86</span>
							<input type="text" placeholder="请输入手机号码或邮箱" v-model="username">
						</li>
						<li>
							<span class="inputSpan">密码</span>
							<input type="password" placeholder="请输入密码" ref='password' v-model="password">
							<span class="iconfont" @click='eyeChange'>&#xe63b;</span>
						</li>
						<li>
							<input type="button" value="登录" @click='login'>
						</li>
					</ul>
				</form>
				<div class="regBtn"><span class="forgetPass">忘记密码？</span><span @click='registerBtn'>注册</span></div>
			</div>
		</div>
		<footer>
			<div class="footer_one">
				登录即代表您已阅读并同意
				<a href="#">《服务协议及隐私政策》</a>
			</div>
			<div class="footer_two">
					<span>关于同程</span>
					<span>意见反馈</span>
					<span>客服电话</span>
			</div>
			<p class="footer_three">©2019同程旅游</p>
		</footer>
		<div class="errorLogin" v-if='isError'>
			<div class="errorInfor">
				<div class="errortop">{{isErrorInfor}}</div>
				<div class="errorbottom" @click='isShowErrorLogin'>确定</div>
			</div>
		</div>
	</div>
  
</template>

<script>
import axios from 'axios'
import {setCookie,getCookie} from '@/assets/js/cookie.js'
export default {
  name: 'travel_homeGuess',
  props:{
  },
  data(){
	  return{
		  phoneNum:'',//手机号
		  isShowTime:false,//是否显示验证码时间
		  timeSecond:0,
		  Lists:[
			  {
				  tabs:'验证码登录',
				  
			  },
			  {
				  tabs:'账号密码登录',
			  },
		  ],
		  Num:-1,
		  active:'',
		  headerScroll:'',
		  isShowClass:'',
		  isShow1:true,
		  isShow2:false,
		  userlist:[],
		  username:'',
		  password:'',
		  isError:false,
		  isErrorInfor:''
	  }
  },
  methods:{
	  getCode(){//获取手机验证码
		//开始倒计时
		if(this.timeSecond===0){
			this.timeSecond=60
			const TimeOver = setInterval(()=>{
				this.timeSecond--
				if(this.timeSecond<=0){
					clearInterval(TimeOver)
				}
			},1000)
		}
	  },
	  registerBtn(){
		  this.$router.push('/register')
	  },
	  isShowErrorLogin(){
		  this.isError=false;
	  },
	  ShowClass(index){//点击页面滑动
		  this.Num = index
		  if(index==0){
			 this.isShow1=true
			 this.isShow2=false
		  }else{
			  this.isShow1=false
			  this.isShow2=true
		  }
	  },
	  eyeChange(e){
		  let a=(e.target.innerText)
		  if(a=='\ue63b'){//密码不可见
			  e.target.innerText='\ue681'
			  this.$refs.password.type='text'
		  }else{//密码可见
			 e.target.innerText='\ue63b' 
			 this.$refs.password.type='password'
		  }
	  },
	  getHomeData(){
	  		  axios.get("/api/login.json").then(this.getDataSucc)
	  },
	  getDataSucc(res){
	  		  if(res.data){
	  			  const data=res.data
	  			  this.userlist=data.userData
	  		  }
	  },
	  login(){//密码登录方式
        if(this.username == "" || this.password == ""){
            this.isError=true
			this.isErrorInfor='请输入用户名或密码'
        }else{
			let phoneNumLists=[]
			for(let item in this.userlist){
				let phoneNumList=this.userlist[item].phoneNum
				phoneNumLists.push(phoneNumList)
			}
			if(phoneNumLists.indexOf(this.username.trim())>-1){
				let thisID=phoneNumLists.indexOf(this.username.trim())
				if(this.password.trim()===this.userlist[thisID].password){
					this.$store.state.loginId=this.userlist[thisID].id
					sessionStorage.setItem('loginId',this.$store.state.loginId)
					this.$router.push('/login')
					return
				}else{
					this.isError=true
					this.isErrorInfor='您输入的密码错误'
				}
			}else{
				this.isError=true
				this.isErrorInfor='用户名不存在'
			}
      }
    },
  },
  mounted(){
	  this.active='active'
	  this.Num=0  
	  this.getHomeData()
  },
  computed:{
	  rightPhone(){
		  return /^1\d{10}$/.test(this.phoneNum)//验证手机格式是否正确
	  }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
</style>
<style lang="stylus" scoped>
.wrap
	width:100%
	background:#fff
	.errorLogin
		position:absolute
		top:0
		width:100%
		bottom:0
		background:rgba(0,0,0,0.5)
		.errorInfor
			width:70%
			margin:0 auto
			text-align:center
			margin-top:6rem
			font-size:0.35rem
			background:#fff
			height:2rem
			border-radius:0.1rem
			.errortop
				border-bottom:1px solid #ccc
				padding:0.35rem 0
			.errorbottom
				margin-top:0.3rem
				color:rgb(9, 163, 255)
	footer
		color: #b2b2b2;
		width: 100%;
		text-align: center;
		font-size: .3rem;
		position: absolute;
		bottom: 0;
		background:#f2f4f7
		padding:0.3rem 0
		.footer_two
			margin:0.2rem 0
			span
				border-right:1px solid #ccc
				padding:0 0.2rem
			span:last-child
				border-right:none
	.loginBtn
		width:100%
		border-bottom:1px solid #ccc
		height:1rem
		ul
			width:90%
			margin:0 auto
			display:flex
			li
				width:50%
				-webkit-box-flex: 1;
				-ms-flex: 1;
				flex: 1;
				text-align: center;
				.line
					line-height:1rem
					text-align:center
					font-size:0.35rem
					position: relative;
				.active
					color:#23beae
				.active:after
					display: block;
					content: "";
					width: 100%;
					height: 3px;
					background: #23beae;
					position: absolute;
					bottom: -0.3rem;
					left: -0.2rem;
					border-radius: 2px;
					padding:0 0.2rem
	.headerScroll
		position:fixed
		top:0.8rem
		left:0
		z-index:100
		background:#fff
		width:100%
	.loginContent
		width:100%
		.normal-login
		.phone-login,.normal-login
			width:90%
			margin:0 auto
			ul
				li
					border-bottom:1px solid #ddd
					overflow:hidden
					position:relative
					.inputSpan
						position:absolute
						width:1.5rem
						left:0
						top:50%
						transform: translateY(-50%)
						font-size:0.4rem
					input
						width:100%
						padding:0.4rem 0
						font-size:0.4rem
						margin-left:1.5rem
					.phone_yanzhengma
						position:absolute
						right:0
						top:50%
						transform: translateY(-50%)
						font-size:0.3rem
						color:#ccc
						background:#fff
						&.right_phone
							color:#000
					.iconfont
						position:absolute
						right:0 
						top:50%
						transform: translateY(-50%)
						font-size:0.5rem
				li:last-child
					border-bottom:none
					input
						margin:0.3rem 0
						padding:0.2rem 0
						background:#ff5346;
						color:#fff
						font-weight:bold
		.regBtn
			width:90%
			margin:0 auto
			overflow:hidden
			span
				float:right
				color:#ccc
				font-size:0.32rem
			.forgetPass
				float:left
</style>
